<!-- 树状菜单 -->
<template>
    <div class="tree">
        <a-tree show-line :tree-data="treeData" :replaceFields="{
            children: 'children', title: 'module', key: 'id'
        }">
            <a-icon slot="switcherIcon" type="down" />
            <template slot="custom" slot-scope="item">
                <span class="node-title" @click="onSelect(item)">{{ item.module }} </span>
                <!-- <span class="icon-wrap" @click="handleShowTypeModal('edit', item)">
                    <a-icon type="edit" />
                </span>
                <span class="icon-wrap" @click="handleDelType(item.id)">
                    <a-icon type="delete" />
                </span> -->
            </template>
        </a-tree>
    </div>
</template>

<script>
import { informationCategoryList, delInformationCategory } from "@/api/content/management";
export default {
    components: {
    },
    data() {
        return {
            treeData: []
        }
    },
    computed: {},
    watch: {},
    methods: {
        getModule() {
            informationCategoryList().then((r) => {
                if (typeof r.data !== "object") return;
                this.treeData = (r.data || []).map(item => {
                    return {
                        ...item,
                        scopedSlots: { title: "custom" }, // 自定义组件需要绑定
                        children: item.children ? item.children.map(child => {
                            return {
                                ...child,
                                scopedSlots: { title: "custom" }, // 自定义组件需要绑定
                            }
                        }) : undefined
                    }
                });
            });
        },
        onSelect(row) {
            console.log('selected', row);
            this.$emit('searchManagement', {
                module: row.parentId === 0 ? row.id : row.parentId,
                moduleSub: row.parentId === 0 ? undefined : row.id,
            })
        },
        handleShowTypeModal(type, row) {
            let data = {
                title: type === 'add' ? '新增分类' : '编辑分类',
                type,
                obj: JSON.parse(JSON.stringify(row))
            }
            this.$refs.typeModal.show(data)
        },
        handleDelType(id) {
            var _this = this;
            this.$confirm({
                title: "删除?",
                content: "是否确定删除该分类?",
                onOk() {
                    delInformationCategory(id).then((res) => {
                      _this.$message.success(`删除成功`);
                      _this.getModule();
                    });
                },
                onCancel() { },
            });
        },
        actionSuccess() {
            this.getModule()
        }
    },
    created() {
        this.getModule();
    },
    mounted() {

    },
}
</script>
<style scoped lang="less">
.tree {
    width: 200px;
    flex-shrink: 0;

    ._header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0;

        ._title {
            font-size: 18px;
            font-weight: bold;
        }
    }
}

// ::v-deep {
//     .ant-tree li .ant-tree-node-content-wrapper {
//         width: 100%;
//     }
// }

.icon-wrap {
    // float: right;
    margin-left: 15px;
}
</style>